<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <title>社交网站排行榜样式集合</title>
  <!-- Bootstrap 5 CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
  
  <style>
    :root {
      --primary: #4F46E5;
      --secondary: #10B981;
      --danger: #EF4444;
      --warning: #F59E0B;
      --light: #F9FAFB;
      --dark: #1F2937;
      --border-light: #E5E7EB;
      --shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background-color: #f0f2f5;
      color: var(--dark);
      padding: 0;
      margin: 0;
      min-height: 100vh;
    }
    
    .container {
      max-width: 400px;
      margin: 0 auto;
      background-color: white;
      min-height: 100vh;
      overflow: hidden;
    }
    
    /* 顶部导航栏 */
    .navbar {
      padding: 12px 16px;
      background-color: white;
      border-bottom: 1px solid var(--border-light);
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 100;
    }
    
    .navbar-title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
    }
    
    .navbar-actions {
      display: flex;
      gap: 16px;
    }
    
    .navbar-btn {
      background: none;
      border: none;
      color: #6B7280;
      font-size: 18px;
      cursor: pointer;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .navbar-btn:hover {
      background-color: #F3F4F6;
      color: var(--primary);
    }
    
    /* 排行榜切换标签 */
    .rank-tabs {
      display: flex;
      border-bottom: 1px solid var(--border-light);
      overflow-x: auto;
      scrollbar-width: none;
    }
    
    .rank-tabs::-webkit-scrollbar {
      display: none;
    }
    
    .rank-tab {
      padding: 14px 16px;
      font-size: 15px;
      font-weight: 500;
      color: #6B7280;
      border: none;
      background: none;
      white-space: nowrap;
      position: relative;
    }
    
    .rank-tab.active {
      color: var(--primary);
    }
    
    .rank-tab.active::after {
      content: "";
      position: absolute;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 3px;
      background-color: var(--primary);
      border-radius: 3px 3px 0 0;
    }
    
    /* 排行榜容器 */
    .rank-container {
      display: none;
    }
    
    .rank-container.active {
      display: block;
    }
    
    /* 排行榜项通用样式 */
    .rank-item {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      border-bottom: 1px solid var(--border-light);
      transition: background-color 0.2s ease;
    }
    
    .rank-item:hover {
      background-color: var(--light);
    }
    
    .rank-position {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 600;
      margin-right: 12px;
      flex-shrink: 0;
    }
    
    .rank-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 12px;
      flex-shrink: 0;
      border: 2px solid transparent;
    }
    
    .rank-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .rank-info {
      flex: 1;
      min-width: 0;
    }
    
    .rank-name {
      font-weight: 500;
      font-size: 16px;
      margin-bottom: 2px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .rank-desc {
      font-size: 13px;
      color: #6B7280;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .rank-score {
      font-weight: 600;
      font-size: 16px;
      color: var(--dark);
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 样式1: 经典排行榜 */
    .rank-style-1 .top-3 {
      padding: 20px 16px;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      background-color: var(--light);
      margin-bottom: 8px;
    }
    
    .rank-style-1 .top-item {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    
    .rank-style-1 .top-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      margin-bottom: 8px;
      position: relative;
    }
    
    .rank-style-1 .top-1 .top-avatar {
      width: 76px;
      height: 76px;
      border: 3px solid var(--warning);
    }
    
    .rank-style-1 .top-2 .top-avatar {
      border: 3px solid #9CA3AF;
    }
    
    .rank-style-1 .top-3 .top-avatar {
      border: 3px solid #D97706;
    }
    
    .rank-style-1 .top-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .rank-style-1 .top-name {
      font-weight: 600;
      margin-bottom: 4px;
      text-align: center;
    }
    
    .rank-style-1 .top-score {
      font-size: 13px;
      color: #6B7280;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .rank-style-1 .top-badge {
      position: absolute;
      bottom: -6px;
      right: -6px;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: 600;
      font-size: 12px;
    }
    
    .rank-style-1 .top-1 .top-badge {
      background-color: var(--warning);
    }
    
    .rank-style-1 .top-2 .top-badge {
      background-color: #9CA3AF;
    }
    
    .rank-style-1 .top-3 .top-badge {
      background-color: #D97706;
    }
    
    .rank-style-1 .rank-list {
      margin-top: 8px;
    }
    
    .rank-style-1 .rank-position.top-1 {
      background-color: var(--warning);
      color: white;
    }
    
    .rank-style-1 .rank-position.top-2 {
      background-color: #9CA3AF;
      color: white;
    }
    
    .rank-style-1 .rank-position.top-3 {
      background-color: #D97706;
      color: white;
    }
    
    .rank-style-1 .rank-position {
      background-color: #F3F4F6;
      color: #6B7280;
    }
    
    /* 样式2: 内容排行榜 */
    .rank-style-2 .rank-item {
      flex-direction: column;
      align-items: flex-start;
      padding: 16px;
    }
    
    .rank-style-2 .rank-header {
      display: flex;
      align-items: center;
      width: 100%;
      margin-bottom: 12px;
    }
    
    .rank-style-2 .rank-content {
      width: 100%;
      margin-bottom: 12px;
    }
    
    .rank-style-2 .content-image {
      width: 100%;
      border-radius: 8px;
      overflow: hidden;
      margin-bottom: 12px;
    }
    
    .rank-style-2 .content-image img {
      width: 100%;
      height: 180px;
      object-fit: cover;
    }
    
    .rank-style-2 .content-title {
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 8px;
      line-height: 1.4;
    }
    
    .rank-style-2 .content-stats {
      display: flex;
      gap: 16px;
      font-size: 13px;
      color: #6B7280;
    }
    
    .rank-style-2 .stat {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    /* 样式3: 简约数字榜 */
    .rank-style-3 {
      background-color: var(--light);
    }
    
    .rank-style-3 .rank-item {
      background-color: white;
      margin: 8px 12px;
      border-radius: 10px;
      border-bottom: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .rank-style-3 .rank-position {
      font-size: 18px;
    }
    
    .rank-style-3 .rank-position.top-1 {
      color: var(--warning);
    }
    
    .rank-style-3 .rank-position.top-2 {
      color: #9CA3AF;
    }
    
    .rank-style-3 .rank-position.top-3 {
      color: #D97706;
    }
    
    .rank-style-3 .rank-score {
      color: var(--primary);
      font-size: 18px;
    }
    
    .rank-style-3 .trend {
      font-size: 12px;
      margin-left: 4px;
      display: flex;
      align-items: center;
    }
    
    .rank-style-3 .trend.up {
      color: var(--secondary);
    }
    
    .rank-style-3 .trend.down {
      color: var(--danger);
    }
    
    /* 样式4: 分类标签榜 */
    .rank-style-4 .category-filter {
      padding: 12px 16px;
      display: flex;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      border-bottom: 1px solid var(--border-light);
    }
    
    .rank-style-4 .category-filter::-webkit-scrollbar {
      display: none;
    }
    
    .rank-style-4 .category-tag {
      padding: 6px 12px;
      background-color: var(--light);
      border-radius: 20px;
      font-size: 13px;
      white-space: nowrap;
      cursor: pointer;
    }
    
    .rank-style-4 .category-tag.active {
      background-color: var(--primary);
      color: white;
    }
    
    .rank-style-4 .rank-item {
      position: relative;
    }
    
    .rank-style-4 .rank-tag {
      position: absolute;
      top: 12px;
      right: 16px;
      padding: 2px 8px;
      border-radius: 12px;
      font-size: 11px;
      font-weight: 500;
      background-color: rgba(79, 70, 229, 0.1);
      color: var(--primary);
    }
    
    .rank-style-4 .rank-info {
      padding-right: 60px;
    }
    
    /* 样式5: 成就徽章榜 */
    .rank-style-5 .rank-item {
      padding: 16px;
    }
    
    .rank-style-5 .rank-achievements {
      display: flex;
      gap: 8px;
      margin-top: 8px;
    }
    
    .rank-style-5 .achievement-badge {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background-color: var(--light);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--primary);
      font-size: 16px;
    }
    
    .rank-style-5 .achievement-badge.legendary {
      background-color: rgba(245, 158, 11, 0.1);
      color: var(--warning);
      border: 1px solid var(--warning);
    }
    
    .rank-style-5 .rank-score {
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }
    
    .rank-style-5 .score-label {
      font-size: 12px;
      color: #6B7280;
      font-weight: normal;
    }
    
    /* 样式切换器 */
    .style-switcher {
      position: fixed;
      top: 20px;
      right: 20px;
      z-index: 1000;
      background-color: white;
      border-radius: 8px;
      box-shadow: var(--shadow);
      overflow: hidden;
      width: 180px;
    }
    
    .switcher-header {
      padding: 10px 16px;
      font-size: 14px;
      font-weight: 600;
      border-bottom: 1px solid var(--border-light);
    }
    
    .switcher-option {
      padding: 12px 16px;
      font-size: 14px;
      cursor: pointer;
    }
    
    .switcher-option:hover {
      background-color: #F3F4F6;
    }
    
    .switcher-option.active {
      background-color: var(--primary);
      color: white;
    }
    
    /* 动画效果 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .rank-container.active {
      animation: fadeIn 0.3s ease;
    }
    
    /* 响应式调整 */
    @media (max-width: 360px) {
      .rank-style-2 .content-image img {
        height: 150px;
      }
    }
  </style>
</head>
<body>
  <!-- 样式切换器 -->
  <div class="style-switcher">
    <div class="switcher-header">排行榜样式</div>
    <div class="switcher-option active" data-style="1">经典排行榜</div>
    <div class="switcher-option" data-style="2">内容排行榜</div>
    <div class="switcher-option" data-style="3">简约数字榜</div>
    <div class="switcher-option" data-style="4">分类标签榜</div>
    <div class="switcher-option" data-style="5">成就徽章榜</div>
  </div>
  
  <div class="container">
    <!-- 顶部导航 -->
    <nav class="navbar">
      <h1 class="navbar-title">排行榜</h1>
      <div class="navbar-actions">
        <button class="navbar-btn" title="搜索"><i class="fa fa-search"></i></button>
        <button class="navbar-btn" title="更多"><i class="fa fa-ellipsis-v"></i></button>
      </div>
    </nav>
    
    <!-- 排行榜切换标签 -->
    <div class="rank-tabs">
      <button class="rank-tab active" data-period="daily">今日</button>
      <button class="rank-tab" data-period="weekly">本周</button>
      <button class="rank-tab" data-period="monthly">本月</button>
      <button class="rank-tab" data-period="yearly">年度</button>
    </div>
    
    <!-- 1. 经典排行榜 -->
    <div class="rank-container active rank-style-1" id="rank1">
      <!-- 前三名展示 -->
      <div class="top-3">
        <div class="top-item top-2">
          <div class="top-avatar">
            <img src="https://picsum.photos/id/1027/200" alt="第二名用户">
            <div class="top-badge">2</div>
          </div>
          <div class="top-name">李梦琪</div>
          <div class="top-score"><i class="fa fa-heart"></i> 12,548</div>
        </div>
        
        <div class="top-item top-1">
          <div class="top-avatar">
            <img src="https://picsum.photos/id/1025/200" alt="第一名用户">
            <div class="top-badge">1</div>
          </div>
          <div class="top-name">王浩然</div>
          <div class="top-score"><i class="fa fa-heart"></i> 18,721</div>
        </div>
        
        <div class="top-item top-3">
          <div class="top-avatar">
            <img src="https://picsum.photos/id/1066/200" alt="第三名用户">
            <div class="top-badge">3</div>
          </div>
          <div class="top-name">张思远</div>
          <div class="top-score"><i class="fa fa-heart"></i> 10,356</div>
        </div>
      </div>
      
      <!-- 排行榜列表 -->
      <div class="rank-list">
        <div class="rank-item">
          <div class="rank-position">4</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1074/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">刘雨晴</div>
            <div class="rank-desc">摄影博主 · 3.2k 粉丝</div>
          </div>
          <div class="rank-score"><i class="fa fa-heart"></i> 8,942</div>
        </div>
        
        <div class="rank-item">
          <div class="rank-position">5</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1083/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">陈天明</div>
            <div class="rank-desc">旅行达人 · 5.7k 粉丝</div>
          </div>
          <div class="rank-score"><i class="fa fa-heart"></i> 7,625</div>
        </div>
        
        <div class="rank-item">
          <div class="rank-position">6</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1062/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">赵晓琳</div>
            <div class="rank-desc">美食博主 · 2.8k 粉丝</div>
          </div>
          <div class="rank-score"><i class="fa fa-heart"></i> 6,892</div>
        </div>
        
        <div class="rank-item">
          <div class="rank-position">7</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1005/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">孙博文</div>
            <div class="rank-desc">科技评论 · 4.1k 粉丝</div>
          </div>
          <div class="rank-score"><i class="fa fa-heart"></i> 5,327</div>
        </div>
        
        <div class="rank-item">
          <div class="rank-position">8</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1012/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">周思琪</div>
            <div class="rank-desc">时尚博主 · 6.3k 粉丝</div>
          </div>
          <div class="rank-score"><i class="fa fa-heart"></i> 4,985</div>
        </div>
      </div>
    </div>
    
    <!-- 2. 内容排行榜 -->
    <div class="rank-container rank-style-2" id="rank2">
      <div class="rank-item">
        <div class="rank-header">
          <div class="rank-position top-1">1</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1025/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">王浩然</div>
            <div class="rank-desc">发布于 3 小时前</div>
          </div>
        </div>
        
        <div class="rank-content">
          <div class="content-title">分享一组城市日落摄影作品，记录城市与自然的完美融合</div>
          <div class="content-image">
            <img src="https://picsum.photos/id/1039/800/400" alt="内容图片">
          </div>
          <div class="content-stats">
            <div class="stat"><i class="fa fa-heart-o"></i> 3.2k</div>
            <div class="stat"><i class="fa fa-comment-o"></i> 156</div>
            <div class="stat"><i class="fa fa-share-alt"></i> 89</div>
          </div>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-header">
          <div class="rank-position top-2">2</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1027/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">李梦琪</div>
            <div class="rank-desc">发布于 5 小时前</div>
          </div>
        </div>
        
        <div class="rank-content">
          <div class="content-title">周末探店：隐藏在老城区的复古咖啡馆，氛围感拉满</div>
          <div class="content-image">
            <img src="https://picsum.photos/id/431/800/400" alt="内容图片">
          </div>
          <div class="content-stats">
            <div class="stat"><i class="fa fa-heart-o"></i> 2.8k</div>
            <div class="stat"><i class="fa fa-comment-o"></i> 215</div>
            <div class="stat"><i class="fa fa-share-alt"></i> 127</div>
          </div>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-header">
          <div class="rank-position top-3">3</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1066/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">张思远</div>
            <div class="rank-desc">发布于 昨天</div>
          </div>
        </div>
        
        <div class="rank-content">
          <div class="content-title">徒步旅行Vlog：征服海拔3000米的高山，看到了最美的风景</div>
          <div class="content-image">
            <img src="https://picsum.photos/id/10/800/400" alt="内容图片">
          </div>
          <div class="content-stats">
            <div class="stat"><i class="fa fa-heart-o"></i> 2.5k</div>
            <div class="stat"><i class="fa fa-comment-o"></i> 187</div>
            <div class="stat"><i class="fa fa-share-alt"></i> 93</div>
          </div>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-header">
          <div class="rank-position">4</div>
          <div class="rank-avatar">
            <img src="https://picsum.photos/id/1074/200" alt="用户头像">
          </div>
          <div class="rank-info">
            <div class="rank-name">刘雨晴</div>
            <div class="rank-desc">发布于 2 天前</div>
          </div>
        </div>
        
        <div class="rank-content">
          <div class="content-title">夏季穿搭灵感：简约舒适的通勤装扮，适合上班族的5套搭配</div>
          <div class="content-image">
            <img src="https://picsum.photos/id/331/800/400" alt="内容图片">
          </div>
          <div class="content-stats">
            <div class="stat"><i class="fa fa-heart-o"></i> 1.9k</div>
            <div class="stat"><i class="fa fa-comment-o"></i> 243</div>
            <div class="stat"><i class="fa fa-share-alt"></i> 156</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 3. 简约数字榜 -->
    <div class="rank-container rank-style-3" id="rank3">
      <div class="rank-item">
        <div class="rank-position top-1">1</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1025/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">王浩然</div>
          <div class="rank-desc">影响力指数</div>
        </div>
        <div class="rank-score">
          98.7 <span class="trend up"><i class="fa fa-caret-up"></i> 3.2</span>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position top-2">2</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1027/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">李梦琪</div>
          <div class="rank-desc">影响力指数</div>
        </div>
        <div class="rank-score">
          96.5 <span class="trend up"><i class="fa fa-caret-up"></i> 1.8</span>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position top-3">3</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1066/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">张思远</div>
          <div class="rank-desc">影响力指数</div>
        </div>
        <div class="rank-score">
          92.3 <span class="trend down"><i class="fa fa-caret-down"></i> 0.5</span>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position">4</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1074/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">刘雨晴</div>
          <div class="rank-desc">影响力指数</div>
        </div>
        <div class="rank-score">
          89.7 <span class="trend up"><i class="fa fa-caret-up"></i> 2.1</span>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position">5</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1083/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">陈天明</div>
          <div class="rank-desc">影响力指数</div>
        </div>
        <div class="rank-score">
          87.5 <span class="trend down"><i class="fa fa-caret-down"></i> 1.3</span>
        </div>
      </div>
    </div>
    
    <!-- 4. 分类标签榜 -->
    <div class="rank-container rank-style-4" id="rank4">
      <div class="category-filter">
        <div class="category-tag active">全部</div>
        <div class="category-tag">美食</div>
        <div class="category-tag">旅行</div>
        <div class="category-tag">摄影</div>
        <div class="category-tag">时尚</div>
        <div class="category-tag">科技</div>
        <div class="category-tag">运动</div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position top-1">1</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1025/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">王浩然</div>
          <div class="rank-desc">摄影作品获得最多收藏</div>
        </div>
        <div class="rank-tag">摄影</div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position top-2">2</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1027/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">李梦琪</div>
          <div class="rank-desc">美食探店视频播放量第一</div>
        </div>
        <div class="rank-tag">美食</div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position top-3">3</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1066/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">张思远</div>
          <div class="rank-desc">旅行攻略被分享最多</div>
        </div>
        <div class="rank-tag">旅行</div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position">4</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1074/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">刘雨晴</div>
          <div class="rank-desc">时尚搭配获得最多点赞</div>
        </div>
        <div class="rank-tag">时尚</div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position">5</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1005/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">孙博文</div>
          <div class="rank-desc">科技评测评论互动最多</div>
        </div>
        <div class="rank-tag">科技</div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position">6</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1083/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">陈天明</div>
          <div class="rank-desc">户外运动视频最受欢迎</div>
        </div>
        <div class="rank-tag">运动</div>
      </div>
    </div>
    
    <!-- 5. 成就徽章榜 -->
    <div class="rank-container rank-style-5" id="rank5">
      <div class="rank-item">
        <div class="rank-position top-1">1</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1025/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">王浩然</div>
          <div class="rank-desc">摄影大师 · 创作达人</div>
          <div class="rank-achievements">
            <div class="achievement-badge legendary" title="年度最佳创作者"><i class="fa fa-trophy"></i></div>
            <div class="achievement-badge" title="10万+点赞"><i class="fa fa-heart"></i></div>
            <div class="achievement-badge" title="优质内容创作者"><i class="fa fa-star"></i></div>
            <div class="achievement-badge" title="社区活跃分子"><i class="fa fa-fire"></i></div>
          </div>
        </div>
        <div class="rank-score">
          <span>26,842</span>
          <span class="score-label">积分</span>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position top-2">2</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1027/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">李梦琪</div>
          <div class="rank-desc">美食家 · 生活博主</div>
          <div class="rank-achievements">
            <div class="achievement-badge" title="美食达人"><i class="fa fa-cutlery"></i></div>
            <div class="achievement-badge" title="5万+点赞"><i class="fa fa-heart"></i></div>
            <div class="achievement-badge" title="内容创新者"><i class="fa fa-lightbulb-o"></i></div>
          </div>
        </div>
        <div class="rank-score">
          <span>21,578</span>
          <span class="score-label">积分</span>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position top-3">3</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1066/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">张思远</div>
          <div class="rank-desc">旅行家 · 摄影师</div>
          <div class="rank-achievements">
            <div class="achievement-badge" title="环球旅行者"><i class="fa fa-globe"></i></div>
            <div class="achievement-badge" title="热门攻略作者"><i class="fa fa-map-signs"></i></div>
            <div class="achievement-badge" title="社区贡献者"><i class="fa fa-thumbs-up"></i></div>
          </div>
        </div>
        <div class="rank-score">
          <span>18,945</span>
          <span class="score-label">积分</span>
        </div>
      </div>
      
      <div class="rank-item">
        <div class="rank-position">4</div>
        <div class="rank-avatar">
          <img src="https://picsum.photos/id/1074/200" alt="用户头像">
        </div>
        <div class="rank-info">
          <div class="rank-name">刘雨晴</div>
          <div class="rank-desc">时尚达人 · 穿搭博主</div>
          <div class="rank-achievements">
            <div class="achievement-badge" title="时尚先锋"><i class="fa fa-diamond"></i></div>
            <div class="achievement-badge" title="人气博主"><i class="fa fa-users"></i></div>
          </div>
        </div>
        <div class="rank-score">
          <span>15,327</span>
          <span class="score-label">积分</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Bootstrap JS -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  
  <script>
    // 当前选中的排行榜样式和周期
    let currentRankStyle = '1';
    let currentPeriod = 'daily';
    
    // 获取DOM元素
    const switcherOptions = document.querySelectorAll('.switcher-option');
    const rankTabs = document.querySelectorAll('.rank-tab');
    const rankContainers = {
      '1': document.getElementById('rank1'),
      '2': document.getElementById('rank2'),
      '3': document.getElementById('rank3'),
      '4': document.getElementById('rank4'),
      '5': document.getElementById('rank5')
    };
    const categoryTags = document.querySelectorAll('.category-tag');
    
    // 切换排行榜样式
    function switchRankStyle(style) {
      // 隐藏所有排行榜容器
      Object.values(rankContainers).forEach(container => {
        container.classList.remove('active');
      });
      
      // 显示选中的排行榜样式
      if (rankContainers[style]) {
        rankContainers[style].classList.add('active');
        currentRankStyle = style;
      }
      
      // 更新切换器选中状态
      switcherOptions.forEach(option => {
        option.classList.remove('active');
        if (option.getAttribute('data-style') === style) {
          option.classList.add('active');
        }
      });
    }
    
    // 切换时间周期
    function switchPeriod(period) {
      currentPeriod = period;
      
      // 更新标签选中状态
      rankTabs.forEach(tab => {
        tab.classList.remove('active');
        if (tab.getAttribute('data-period') === period) {
          tab.classList.add('active');
        }
      });
      
      // 模拟数据更新
      simulateDataUpdate();
    }
    
    // 切换分类标签
    function switchCategory(category) {
      categoryTags.forEach(tag => {
        tag.classList.remove('active');
        if (tag.textContent === category) {
          tag.classList.add('active');
        }
      });
      
      // 模拟数据更新
      simulateDataUpdate();
    }
    
    // 模拟数据更新
    function simulateDataUpdate() {
      // 显示加载提示
      const activeContainer = document.querySelector('.rank-container.active');
      if (activeContainer) {
        const originalContent = activeContainer.innerHTML;
        activeContainer.innerHTML = '<div style="padding: 40px 0; text-align: center;"><i class="fa fa-refresh fa-spin" style="font-size: 24px; color: var(--primary);"></i></div>';
        
        // 200ms后恢复内容，模拟加载
        setTimeout(() => {
          activeContainer.innerHTML = originalContent;
        }, 200);
      }
    }
    
    // 样式切换事件
    switcherOptions.forEach(option => {
      option.addEventListener('click', function() {
        const style = this.getAttribute('data-style');
        switchRankStyle(style);
      });
    });
    
    // 周期切换事件
    rankTabs.forEach(tab => {
      tab.addEventListener('click', function() {
        const period = this.getAttribute('data-period');
        switchPeriod(period);
      });
    });
    
    // 分类标签切换事件
    categoryTags.forEach(tag => {
      tag.addEventListener('click', function() {
        const category = this.textContent;
        switchCategory(category);
      });
    });
    
    // 排行榜项点击事件
    document.addEventListener('click', function(e) {
      const rankItem = e.target.closest('.rank-item');
      if (rankItem && !e.target.closest('.category-tag')) {
        const name = rankItem.querySelector('.rank-name').textContent;
        const position = rankItem.querySelector('.rank-position').textContent;
        alert(`查看第${position}名 ${name} 的详细信息`);
      }
    });
  </script>
</body>
</html>

